Je eigen site met WYSIWYG Web Builder 2.5 


Webstek met bouwblokken 


In de vorige Clickx-nummers hebben we al aardig wat gejongleerd met flashanimaties en 
javascripts voor onze webstek. Tijd om al die bouwblokken — én andere — netjes op elkaar 
te stapelen. WYSIWYG Web Builder is daarvoor de geknipte tool, want het is gratis en 


gebruiksvriendelijk… Á_TOON VAN DAELE 


Inl (what you see is what you get) klinkt als muziek in de 
oren van elke webbouwer: terwijl je de webpagina nog aan het 
opbouwen bent, zie je immers al meteen welk resultaat je in de brow- 
ser mag verwachten. Het zal je niet verbazen dat ook WYSIWYG Web 
Builder uit hetzelfde hout gesneden is. Meer zelfs, terwijl bij andere 
wywisyg-webtools de onderliggende html-code nog geregeld opduikt, 
moet je in deze tool al diep graven om ook maar een spoor van de 
html-taal te vinden! WYSIWYG Web Builder mag je dus terecht een 
html-generator in plaats van een editor noemen: jij hoeft de bouwblok- 
ken maar aan te slepen, en de tool breit er op de achtergrond alle 
nodige html-code rond! Wat overigens niet wegneemt dat je tóch aan 
die code kan sleutelen, mocht je dat ooit willen. 

Je vindt WYSIWYG Web Builder (www.pablosoftwaresolutions.com) — voort- 
aan houden we het gewoon op Web Builder — op onze cd-rom. Na de 
installatie kan je zo aan de slag. Wel moet je nog bevestigen dat je deze 
gratis tool enkel voor persoonlijk, niet-commercieel gebruik inzet. En 
wie in een gulle bui is, kan op de website terecht voor een donatie. 
In deze workshop laten wij Web Builder van z'n leukste kant zien. We 
hebben namelijk een demo-webpagina ontworpen waarin we zowat alle 
registers opentrekken. Tekst, links, afbeeldingen, rollovers, scripts, een 
banner, een flashanimatie, een tabel, een fotogalerij tot een heus 
webformulier toe. Onze pagina bevat het allemaal, en voor je het weet. 
die van jou ook. Voor wie er zin in heeft, tonen we hoe je zo’n pagina 
stap voor stap samenstelt. 
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Zo ziet Web Builder er ongeveer uit bij een eerste start. 


STAP 1 / VERKENNING 


Zodra je Web Builder opstart, staat er al een lege webpagina in de 
steigers — net alsof je in het menu Fire achtereenvolgens New Pace, BLANK 
Pace had geselecteerd (zie afbeelding 1). Overigens kan je in Web Builder 
ook meer dan één (al dan niet lege) webpagina tegelijk openen. Stan- 
daard verschijnt die pagina dan in een apart venstertje. Nog handiger 
echter lijkt ons een weergave met tabbladen. Deel je die mening, open 
dan het menu Toorts, Oprrons en plaats een vinkje naast Use TABBED INTER- 
FAcE op het tabblad Apvanceo. Je hebt intussen al gemerkt dat Web 
Builder ook over een aantal werkbalken beschikt. Welke je precies te 
zien krijgt, bepaal je zelf via het menu View, Toougars: met een vinkje 
maak je hier tot acht werkbalken zichtbaar. 


STAP 2 / CONFIGURATIE WEB BUILDER 


We blijven nog even hangen in het menu Toorts, Oprrons, want daar kan 
je nog een aantal interessante instellingen kwijt. Zo laat het tabblad 
Foupers je toe een eigen map op te geven waar je webpagina's en de 
gebruikte afbeeldingen standaard horen terecht te komen. De opties 
op het tabblad HTML ogen wat technischer, maar zonder in detail te 
gaan raden we je aan de bovenste optie te kiezen: Fixep Pace Lavour. Dat 
geeft je iets meer geavanceerde mogelijkheden bij het plaatsen van je 
bouwblokken (zie afbeelding 2). Enkel als je bezoekers geregeld met 
oudere browsers aankloppen, selecteer je de tweede optie: Dynamic Pace 


Options 
HTML Advanced Folders Publish 
Browser Compatibility 
de Page Layout 
Uses Cascading Style Sheet (CSS) positioning. 
O Dynamic Page Layout 
Uses complex hidden tables (classic HTML). 


CCS-P voor een exacte 
positionering. 


Lavour. Bevestig met OK om het dialoogvenster weer te verlaten. Voor 
een nauwkeurige positionering van je bouwblokken plaats je in het 
menu View best ook een vinkje naast de opties Rurers en Grio. 


STAP 3 / CONFIGURATIE WEBPAGINA (1) 


Web Builder zelf hebben we nu al naar wens geconfigureerd; tijd om ook 
onze webpagina op smaak te brengen. Daarvoor maak je eerst een om- 
metje langs het menu View, Pace Properties. Er duikt een dialoogvenster 
op met een handvol tabbladen. Een ervan is het tabblad Genera. Hier 
kan je de pagina automatisch in de browser laten centreren, en onder 
meer de paginatitel, lettertype en —grootte, en de beoogde afmetingen 
van je webpagina ingeven (zie afbeelding 3). Deze laatste verhinderen 
echter niet dat je een object (deels) buiten de paginagrenzen kan plaat- 
sen, waarna Web Builder de paginagrootte automatisch zal aanpassen 
om ook dat object plaats te geven. Om die reden maak je wellicht beter 
gebruik van de optie Show Guroe Borpers in het menu Lavour, Gure Serrinas: 
je merkt het dan meteen als een object buiten jouw begrenzing valt. 


STAP 4 / CONFIGURATIE WEBPAGINA (2) 


Ook Backarounp is een absoluut onmisbaar tabblad. Het laat je toe de kleur 
of een figuur voor de achtergrond in te stellen. Verder kan je hier ook 
een kleur vastleggen voor elke linkstatus (Link, Vistrep Link en Active 
Link): kies je hier Custom, dan staat meteen het ganse kleurengamma ter 
beschikking. Je kan je pagina zelfs opvrolijken met een automatisch 
afspelend geluidje, en je bepaalt zelf hoe vaak je je bezoekers daarmee 
wil teisteren ;-). Het tabblad Scrouugars is beslist een optie om indruk 
mee te maken. Hier kan je namelijk de schuifbalken van de browser tot 
het kleinste detail zelf inkleuren (zie afbeelding 4). Verder heb je ook 
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NIET VAN NUL... 


Zie je het niet meteen zitten om vanaf nul een eigen webstek te 
bouwen? Geen nood, ook daar heeft Web Builder aan gedacht. Je 
kan immers bestaande html-pagina’s importeren en daarop ver- 
der borduren. Daarvoor stip je in het menu Fie de optie New Pace, 
From Existing HTML Pace aan. Je kan dan hetzij naar een eigen 
pagina op je schijf verwijzen, hetzij rechtstreeks een online pa- 
gina sponzen. Klinkt indrukwekkend, maar in de praktijk valt dit 
wel wat tegen… Web Builder ondersteunt bij zo’n import-operatie 
namelijk geen tabellen, scripts, stijlbladen of multimediacompo- 
nenten. Dan ben je wellicht beter af met een keurig sjabloon dat 
al op maat van Web Builder is gesneden. Ook dat doe je via het 
menu Frie, New Pace, waar je dit keer From TempLate kiest. Stan- 
daard krijg je dan een drietal sjablonen te zien. Erg bescheiden 
dus, maar je krijg in het dialoogvenster tevens een link naar 
extra exemplaren aangeboden. Die hoef je dan maar te downloa- 
den en uit te pakken naar Templates, een submap van de map 
waarin Web Builder zich heeft genesteld. Dubbelklik je op zo’n 
sjabloon, dan geef je eerst nog snel de gewenste naam van je 
webpagina op, en daarna kan je aan de slag. Alle bouwblokken 
staan al in het gelid; je hoeft ze enkel nog via een dubbelklik 
verder vorm te geven en van eigen inhoud te voorzien! 
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Sjablonen, best handig voor als het snel moet gaan. 


nog het tabblad Pace Transrrrons, the place to be voor wie het flashy wil! 
Kies uit zo’n 25 overgangseffecten voor je webpagina, maar hou er wel 
rekening mee dat deze geinigheid het enkel doet in Internet Explorer. 


STAP 5 / OPSLAG 


Je staat natuurlijk al te popelen om je eerste bouwblokken aan te 
slepen. Daar zijn we dadelijk aan toe, maar niet voordat we onze pagina 
al een eerste keer veilig stellen. Open daarvoor het menu Fie, en kies 
Save Pae (As). Web Builder bewaart je creatie dan in een eigen formaat, 


VAKTAAL 


HTML (HYPERTEXT MARKUP LANGUAGE): De ‘programmeertaal’ om webpagina's te maken. 
Bijzonderheid van html is de mogelijkheid om hyperlinks naar andere pagina's te maken. 
Om html-pagina’s te bekijken, heb je een browser nodig, zoals Internet Explorer of Firefox, 
noodzakelijk. Html-pagina's maken kan je met de hand, of met gespecialiseerde editors. 
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met de extensie .wbp. Nu kan je zo’n document wel in je browser bekij- 
ken via de Preview-knop in de werkbalk Sranparp Toorts (of via de optie 
Preview IN Browser in het Fite-menu), maar als je de webpagina ook zon- 
der hulp van Web Builder wil bewonderen, moet je die wel eerst omzet- 
ten naar het html-formaat. Dat doe je alweer vanuit het Frire-menu, waar 
je dit keer Export ro HTML kiest. De bijhorende afbeeldingen worden dan 
standaard in de submap Images opgeslagen. Hoe je je webpagina's naar 
je webstek kan uploaden, vertellen we je in de laatste stap. 


STAP 6 / FLASHANIMATIE 


We hebben het al gezegd: in Web Builder hoef je eigenlijk alleen maar 
bouwblokken aan te slepen, en de volgorde speelt daarbij niet zo’n rol. 
Wij werken onze modelpagina daarom gemakshalve van boven naar on- 
deren af. Een kleine flashanimatie bijt de spits af, bijvoorbeeld een die 
we al met SWiSH (zie Clickx nr 103) hebben klaargestoomd. Zorg alvast 
dat je de toolbar Apvancep roous zichtbaar hebt gemaakt. Druk hier op de 
knop Frasn en teken met de muis een rechthoek van dezelfde grootte 
als je Flashanimatie. Op de statusbalk kan je de afmetingen aflezen. Je 
kan die rechthoek vervolgens exact in het midden van de pagina plaat- 
sen via het menu Lavour, CENTER IN Pace, HorizontaL. Op elk moment kan je 
ook nog de grootte van die rechthoek aanpassen door een van de hoe- 
ken met de muis te verslepen. Dubbelklik nu op de rechthoek (of selec- 
teer het object en druk op Aur+Enrer): je belandt nu in het eigenschap- 
penvenster van dit Flash-object. Via de Browse-knop wijs je Web Builder 
de weg naar je swf-bestand (zie afbeelding 6). Voor Quaurry kies je bij 
voorkeur HraH. Zet ook een vinkje bij Aurostart en eveneens bij Loop, als 
je de animatie tenminste eindeloos wil herhalen. Bevestig met OK. Ogen- 
schijnlijk is er niks veranderd, maar zodra je de Preview-knop indrukt. 
komt je animatie meteen tot leven in je browser! 


STAP 7 / ROLLOVERS 


Rollovers zijn afbeeldingen die van uitzicht veranderen zodra je er met 
de muispijl over gaat. Daar is normaal een pittig brokje JavaScript voor 
nodig, maar dat neemt Web Builder natuurlijk geheel voor eigen reke- 
ning! Maak per rollover alvast twee verschillende afbeeldingen klaar met 
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je favoriete beeldbewerker (in gif, jpg of png). Daarna kan je met Web 
Builder aan de slag. In de werkbalk Extra Toors klik je RorLover aan. Teken 
met de muis vervolgens een rechthoek van een willekeurige grootte. 
Zodra je de muisknop loslaat, geef je de locatie van de gewenste afbeel- 
ding op (zoals die er moet uitzien als de muispijl niet over de figuur 
zweeft). Dubbelklik nu op de zopas gecreëerde rollover. In het eigen- 
schappenvenster staat het veld InrriaL Imace al netjes ingevuld, maar nu 
is het nog de beurt aan het veld Mouseover Imace. Via de knop Browse leid 
je Web Builder naar de alternatieve afbeelding voor diezelfde rollover 
(zie afbeelding 7). S1ze laat je normaal gezien staan op Use oRIGINAL IMAGE 
size. Op het tabblad Link vul je ten slotte de url in van de webpagina die 
je de bezoeker wil opdissen, zodra hij de rollover aanklikt. Bij Link Type 
kies je normaal gezien utre. Selecteer je _ BLANK bij Tarcet, dan wordt 
voor de opgeroepen pagina een nieuw browservenster geopend. De 
eerste rollover is klaar. Klik die nu met de rechtermuisknop aan en kies 
Copy. Klik vervolgens met de rechtermuisknop op een lege plaats in de 
webpagina en selecteer Paste. Er verschijnt een duplicaat van de eerste 
rollover. Dubbelklik op deze kopie, en geef ook die de gewenste eigen- 
schappen mee. Herhaal deze operatie voor je andere rollovers. 


STAP 8 / BANNER 


Tijd voor een opvallende banner, maar dan eentje zonder animatie. Ook 
daar heeft Web Builder een pasklaar antwoord op, en opnieuw kloppen 
we daarvoor aan bij Extra Toots. Druk op de knop Banner en teken een 
rechthoek van de gewenste grootte: de paginatitel wordt automatisch 
ingevuld. Je kent intussen de dril: dubbelklikken op het nieuwbakken 
object en de eigenschappen naar wens aanpassen (zie afbeelding 8). Wil 
je de titel van de banner wijzigen, verwijder dan wel eerst het vinkje 
naast Use pace Tire. Verder kan je hier ook lettertype, grootte en positie 
van de banner aanpassen. Een leuke gimmick zit verstopt bij de optie 
GraprenT, in de rubriek Backarouno. Je kan hier met een verloop van twee 
kleuren werken, waarbij via de optie SrvLe ook de richting van dat verloop 
in te stellen valt. Ziet je baniertje er gelikt uit, bevestig dan met OK. 
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onzichtbare rand). Bevestig met OK. Klik je de tabel vervolgens aan met 
de rechtermuisknop, dan kan je via de optie TaBte Properties nog de 
achtergrond- en randkleuren wijzigen (zie afbeelding 9). Wil je zelf tekst 
intikken, dan hoef je maar op een cel te dubbelklikken. Het is uiteraard 
ook mogelijk om een afbeelding in zo’n cel te plaatsen: dat gaat het 
makkelijkst via de knop Imaae, die zich eveneens in de werkbalk HTML 
Toous bevindt. Om de inhoud van zo’n cel te positioneren, klik je de cel 
met de rechtermuisknop aan en kies je dit keer CeuL Properties. Op een- 
zelfde tabblad kan je nu zowel de horizontale als de verticale positio- 
nering regelen, alsook de celachtergrond naar eigen smaak inkleden. 
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STAP 10 / FOTOGALERIJ 


Wie snel wat leuke kiekjes op z'n webstek wil, maar z'n bezoekers niet 
meteen wil afschrikken met reuzengrote afbeeldingen — en dito down- 
CU RSW S WEB Bol LDER loadtijden — zal veel plezier beleven aan de Gatrerv-knop op de werkbalk 
Extra Toors. Die zorgt er in een mum van tijd voor dat je plaatjes zich 
STAP 9 / TABEL in miniatuurvorm op de pagina nestelen en voorziet meteen een link 
naar de ‘echte’ foto’s (zie afbeelding 10). Teken alweer een rechthoek 
Tabellen zijn super handig als je bijvoorbeeld korte tekstfragmenten op van een gepast formaat en dubbelklik hierop. Je komt automatisch in 
je pagina kwijt wil. Zo'n tabel plaats je in Web Builder via de knop Taste het eigenschappenvenster van de Proto GaLery terecht. Nu is het enkel 
in de werkbalk HTML Toors. Ook nu weer teken je eerst een rechthoek nog een kwestie van de juiste foto’s in je galerij te stoppen. Daarvoor 
met de muis. Zodra je de muisknop loslaat, kan je aangeven hoeveel druk je op de knop App en dubbelklik je op het gewenste kiekje. Herhaal 
kolommen of rijen je wenst, en of er extra witruimte moet komen tus- dat voor al je foto's. Selecteer nu achtereenvolgens elke foto in het 
sen de inhoud en de celrand (CeL Papoine) of tussen de cellen onderling _eigenschappenvenster, waarbij je telkens een geschikte titel voor het 
(Ceuu Spacine). Ook de randdikte laat zich hier instellen (o betekent een kiekje intikt. Bepaal meteen ook hoeveel kolommen je galerij moet tel- 
len. In Web Builder zelf is er van enige link vanuit die miniaturen niks 

Web Builder tovert je kiekjes in een knip om tot een te bespeuren, maar een Preview in je browser stelt je meteen gerust! 
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rechthoek — de grootte en positie kan je nadien nog aanpassen. Je 
belandt nu automatisch in een venster waar je uit zo’n 18 scriptjes kan 
kiezen (zie afbeelding 11). Klik je er eentje aan, dan zie je meteen een 
kleine demonstratie. Afhankelijk van je keuze kan je rechtsonder het 
venster nog bijkomende zaken instellen. Leuk is bijvoorbeeld Erasric 
TraiL: een reeks kleine afbeeldingen volgt de muiscursor van de bezoe- 
ker dan op de voet. Wil je het script in je webpagina aan het werk zien, 
vraag dan eerst een Preview in je browser. 

Het is perfect mogelijk om ook je zelfgemaakte scripts via Web Builder 
in je pagina op te nemen. Dat kan in principe via de knop Scriers in de 
werkbalk Apvancep Toots. Hier kies je dan hetzij VBScrier, hetzij Java- 
ScriPt, waarna je de code in het venster plakt — weliswaar zonder de 
<script»-tags. Desnoods kan je de (exacte locatie van deze) code nog 
verder bijwerken door rechtstreeks in de html-code in te grijpen. Dat 
doe je via het menu View, waar je Pace HTML selecteert. 


STAP 12 / WEBFORMULIER 


Nog zo handig natuurlijk, als je wat feedback van je bezoekers weet los 
te peuteren. En hoe kan dat beter dan via een online webformulier? Hier 
heb je echter wel een behoorlijke kluif aan. Maak alvast de werkbalk Form 
Toor zichtbaar, en druk op de knop Form. Teken een geschikt veld voor 
je formulier en dubbelklik hierop. Je krijgt nu een nieuw dialoogvenster 
te zien, waar je op het tabblad GeneraL bij Action het volgende intikt: 
mailto:, gevolgd door je eigen e-mailadres. De rest laat je bij voorkeur 
ongewijzigd — er zijn natuurlijk nog andere mogelijkheden (zoals het 
aanroepen van een speciaal mailscript), maar dat zou ons hier te ver 
leiden. Op het tabblad Lavour kan je onder meer ook nog de achtergrond 
van het formulier instellen. Vervolgens is het de beurt aan de knop 
waarmee de bezoeker je formulier kan versturen. Druk daarvoor op de 
Burron-knop in de werkbalk, en teken een geschikte knop. Dubbelklik op 
het object, geef dit een gepast Varve/LageL (bijvoorbeeld: Verstuur) en 
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kies als Burron Tyre voor Sugmir (zie afbeelding 12). Bevestig met OK. Nu 
kan je het formulier eventueel al uittesten via een browserpreview. 
Natuurlijk heeft zo’n formulier alleen maar zin als je bijkomende ele- 
menten toevoegt, zoals een TExTAREA, Option of CheckBox. Door op zo’n 
object te dubbelklikken, kan je dan nog allerlei eigenschappen aanpassen. 
Enige html-kennis kan hier wel van pas komen. Zelf tekst intikken op het 
formulierblad kan via de knop Text op de werkbalk HTML Toors. 


STAP 13 / ORDENING 


Na enige tijd komt je pagina wellicht bol te staan van allerlei objecten. 
Gelukkig laat Web Builder je hier soepel mee omspringen. Niet alleen kan 
je elk object makkelijk verplaatsen, verwijderen (via de Detere-toets) of 
een andere grootte geven, je kan ze ook snel in verhouding tot elkaar 
uitlijnen (zie afbeelding 13). Stel dat je twee objecten ten overstaan van 
elkaar horizontaal wil centreren. Selecteer dan eerst beide objecten met 
de muis, terwijl je de Surrr-toets ingedrukt houdt. Vervolgens hoef je maar 
de knop Center Horizontat op de werkbalk Aran Toous in te drukken. 

Via een simpele sleepbeweging kan je objecten elkaar ook deels laten 
overlappen, waarbij je zelf bepaalt welk object bovenaan komt te liggen. 
Dat doe je via het menu Lavour, waar je de optie Arranae selecteert en de 
gewenste actie aanstipt (zoals Move To Back of Move Forwaro). 


STAP 14 / PUBLICATIE 


Het lang verwachte moment is aangebroken: je gaat je pagina online 
plaatsen! Dat doe je via de knop Pusuisn. Er verschijnt een dialoogven- 
ster, waar je de App-knop indrukt. Hier stip je de optie Remote aan en 
vul je alle nodige login-gegevens in — die kan je provider je zeker be- 
zorgen (zie afbeelding 14)! Mocht de upload nadien niet lukken, dan kan 
je het nog proberen door hier de optie Use pAssivE MODE FOR TRANSFERS te 
selecteren. Geef een geschikte naam aan de uploadstek en bevestig met 
OK. Selecteer deze naam en druk op de knop PusLisn. Als je alles correct 
hebt ingesteld, prijken je webpagina én alle bijhorende objecten even 
later op het wereldwijde web — tenzij je in het dialoogvenster de optie 
Onuv purist HTML ries had aangestipt! En nu alleen nog die bezoekers 
over de vloer krijgen. 


Onze stoomcursus zit er op, en we zijn er haast zeker van dat Web Buil- 
der je best kan bekoren! Deze tool heeft trouwens nog wel enkele ver- 
rassingen in petto die hier niet aan bod zijn gekomen: zo kan je bijvoor- 
beeld in een knip eigen filmpjes of een heuse lichtkrant op je pagina 
droppen. Aan jou om verder te exploreren… Alvast veel plezier! « 


Edit Publish Location 
Name: Online Clickxsite - webbuilderpagina's| 
Type: O Local Remote 


Host: www. clickkmagazine.be Part: 21 


Usermame: |c3Erllal Anonymous 


Password: 


Folder: webbuilder 


Use passive mode for transfers 


Le moment suprême: 
je stek online! 


